<template>
  <d2-container>
    <!-- 页头部分 -->
		<template slot="header">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="80px" style="height:auto">
				<!-- 说明 -->
				<!-- 一行用一个row -->
				<!-- 每行由若干个col组成 -->
				<!-- 每行所有col的span值加起来，最大不超过24！ -->
				<el-row>
					<el-col :span="5">
						<el-form-item label="用户名" prop="userName">
							<el-input type="text" v-model="queryForm.userName" placeholder="请输入用户名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="门店编码" prop="shopNo">
							<el-input type="text" v-model="queryForm.shopNo" placeholder="请输入门店编码"></el-input>
						</el-form-item>
					</el-col>
          <el-col :span="5">
						<el-form-item label="门店名称" prop="shopName">
							<el-input type="text" v-model="queryForm.shopName" placeholder="请输入门店名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="状态" prop="status">
							<el-select v-model="queryForm.status" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<el-option label="正常" value="0"></el-option>
								<el-option label="冻结" value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
          <el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>
    <template>
		<el-button slot="header" type="primary" style="margin-bottom: 5px" @click="change">新 增</el-button>

      <el-table stripe border
          :data="tableData"
          style="width: 100%">
          <el-table-column type="index" fixed label="序号" width="50"></el-table-column>
          <el-table-column
            fixed
            prop="userName"
            label="用户名"
            width="110">
          </el-table-column>
          <el-table-column
            fixed
            prop="realName"
            label="真实姓名"
            width="110">
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="昵称" >
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
			width="90"
            >
            <template slot-scope="scope">
            <span v-if="scope.row.status == 1">冻结</span>
						<span v-if="scope.row.status == 0">正常</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机">
          </el-table-column>
          <el-table-column
            prop="shopNo"
            label="门店编码">
          </el-table-column>
          <el-table-column
            prop="shopName"
            label="门店名称">
          </el-table-column>
          <el-table-column
            prop="level"
            label="等级">
            <template slot-scope="scope">
            <span v-if="scope.row.level == 0">店员</span>
						<span v-if="scope.row.level == 1">店长</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="flag"
            label="标记">
            <template slot-scope="scope">
            <span v-if="scope.row.flag == 0">无</span>
						<span v-if="scope.row.flag == 1">强制签退权限</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="isAdministrator"
            label="是否授权管理后台"
            >
            <template slot-scope="scope">
            <span v-if="scope.row.isAdministrator == 1">是</span>
						<span v-if="scope.row.isAdministrator == 0">否</span>
          </template>
          </el-table-column>
          <el-table-column
            width="150"
            prop="createTime"
            label="创建时间" :formatter="forDate">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="updateRow(scope.row.id)">编辑</el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                size="small">
                移除
              </el-button>
            </template>
          </el-table-column>
      </el-table>
    </template>
    <template>
      <div>
          <keep-alive>
              <addPage :addPage="addComponent" @on-addPage-change="onAddPageChange" @on-loadlist-change="fetchData" ></addPage>
            </keep-alive>
      </div>
      <div>
          <keep-alive>
              <updatePage @on-loadlist-change="fetchData"  :uShow="updateComponent" @on-uShow-change="onUShowChange" :uId="updateId" @on-id-change="onIdChange"></updatePage>
            </keep-alive>
      </div>
    </template>
    <template slot="footer">
      <div class="page">
        <el-pagination
		  background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50,100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </template>
  </d2-container>
</template>

<script>
import { getShopCashiers, enableShopCashier, deleteShopCashier } from '@api/shop/shop'
import addPage from './add'
import updatePage from './update'
import dayjs from 'dayjs'
export default {
  name: 'system-user',
  components: {
    addPage, updatePage
  },
  data () {
    return {
      addComponent: false,
      updateComponent: false,
      roleDisplay: false,
      updateId: 0,
      queryForm: {
        shopNo: null,
        shopName: null,
        userName: null,
        status: null
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      multipleSelection: [],
      multipleSelectionRole: [],
      roleTableData: []
    }
  },

  mounted () {
    this.fetchData()
  },
  methods: {
    /** 双向绑定 start */
    change () {
      this.addComponent = !this.addComponent
    },
    onAddPageChange (val) {
      this.addComponent = val// ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    uChange () {
      this.updateComponent = !this.updateComponent
    },
    onUShowChange (val) {
      this.updateComponent = val// ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    idChange (val) {
      this.updateId = val
    },
    onIdChange (val) {
      this.updateId = val// ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    /** 双向绑定 end */
    resetPage () {
      this.currentPage = 1
      this.pageSize = 10
      this.total = 0
    },
    submitForm (formName) {
      this.resetPage()
      this.fetchData()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.resetPage()
      this.fetchData()
    },
    fetchData () {
      this.loading = true
      getShopCashiers({
        shopNo: this.queryForm.shopNo,
        shopName: this.queryForm.shopName,
        userName: this.queryForm.userName,
        status: this.queryForm.status,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        // console.info(JSON.stringify(res.data.content))
        this.tableData = res.data.content
        this.total = res.data.total
        this.loading = false
      })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })
    },
    handleSizeChange (val) {
      //  console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
      this.fetchData()
    },
    updateStatus (row) {
      let status = 1
      if (row.status) {
        status = 1
      } else {
        status = 0
      }
      enableShopCashier({ shopCashier: row.id, status: status }).then(res => {
        this.$message({
          message: '更新状态成功',
          type: 'success'
        })
        this.fetchData()
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    deleteRow (index, rows) {
      this.$confirm('确定删除吗').then(() => {
        let id = rows[index].id
        this.loading = true
        deleteShopCashier({ id: id }).then(res => {
          this.fetchData()
          this.loading = false
        }).catch(err => {
          console.log('err', err)
          this.loading = false
        })
      }).catch(() => {
        console.log('取消操作')
      })
    },
    filterIsRoot (value, row) {
      return row.isRoot === value
    },
    updateRow (id) {
      this.uChange()
      this.idChange(id)
    },
    forDate (row, column) {
      return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    // 复选框选择赋值
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 功能授权 窗口 关闭
    handleClose (done) {
      this.$confirm('确定关闭吗').then(() => {
        // function(done)，done 用于关闭 Dialog
        done()
      }).catch(() => {
        // console.log("点击确定时触发");
      })
    }

  }
}
</script>
